<?php
session_start();
include("include/header.php");
include ("include/util.inc.php");

$LEVELS = ["easy","medium","hard"];
$res = $PDO->query("SELECT cname FROM category");
$SIZES = [5,10,15];
$SIZE_NAMES = ["short","medium","long"];

$CATEGORYS = [];
while($row=$res->fetch()){
    array_push($CATEGORYS,$row);
}
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="static/css/all.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="static/css/bootstrap.min.css" type="text/css">
    <script type="text/javascript" src="static/js/jquery.js"></script>
    <script type="text/javascript" src="static/js/bootstrap.js"></script>
</head>
<body class="bg">

<div>
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">ADD PIRVATE QUESTION</h5></div>
            <div class="modal-body">
                <div class="mb-3 row">
                    <label for="staticEmail" class="col-sm-2 col-form-label">category</label>
                    <div class="col-sm-6" id="categorydiv">
                        <select class="form-select" id="newcategory">
                            <?php
                            foreach ($CATEGORYS  as $CATEGORY){
                                ?>
                                <option value="<?=$CATEGORY["cname"]?>"><?=$CATEGORY["cname"]?></option>
                                <?php
                            }
                            ?>
                        </select>
                    </div>
                    <div class="col-sm-4">
                        <button class="btn btn-primary" onclick="show_add_modal()">+</button>
                    </div>
                </div>
                <div class="mb-3 row">
                    <label for="staticEmail" class="col-sm-2 col-form-label">level</label>
                    <div class="col-sm-6">
                        <select class="form-select" id="newlevel">
                            <?php
                            foreach ($LEVELS  as $LEVEL){
                                ?>
                                <option value="<?=$LEVEL?>"><?=$LEVEL?></option>
                                <?php
                            }
                            ?>
                        </select>
                    </div>
                </div>
                <div class="mb-3 row">
                    <div class="col-sm-12">
                        <textarea class="form-control" id="newquestion" placeholder="enter new question" rows="3"></textarea>
                    </div>
                </div>
                <div class="mb-3 row">
                    <div class="col-sm-12">
                        <input type="text" class="form-control" id="newanswer" placeholder="enter answer">
                    </div>
                </div>



            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="add_question()">Save</button>
            </div>
        </div>
    </div>
</div>
<div class="modal" tabindex="-1" id="addcategory">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">ADD CATEGORY</h5>
                <input type="hidden" value="" id="qid">
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" id="close"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3 row">
                    <div class="col-sm-12">
                        <input type="text" class="form-control" id="newcategory2" placeholder="please enter a new category">
                    </div>
                </div>



            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="add_category()">Add</button>
            </div>
        </div>
    </div>
</div>
</body>

<script>
    function add_category(){
        var cname = document.getElementById("newcategory2").value;
        ajaxRequest("add_category.php","get",{cname:cname},function () {
            document.getElementById("categorydiv").innerHTML = this.responseText;
            document.getElementById("close").click();

        },function () {

        })

    }
    function show_add_modal(){
        $("#addcategory").modal("show")
    }
    function add_question(){
        var newquestion = document.getElementById("newquestion").value;

        var newanswer = document.getElementById("newanswer").value;
        var select = document.getElementById("newcategory");
        var category = select.options[select.selectedIndex].value;

        select = document.getElementById("newlevel");
        var level = select.options[select.selectedIndex].value;

        ajaxRequest("add_private_question.php","get",{question:newquestion,answer:newanswer,category:category,level:level},function () {
            alert("add success");
            window.location = "mange.php";
        },function () {
            alert("add error");
        })
    }
</script>